<template>
  <div class="row mt-3">
    <div class="col-md-12 col-lg-12">
      <div class="card">
        <div class="card-body">
          <img id="img"class="mx-auto d-block" src="../src/assets/icon.jpg" alt="">
          <form @submit.prevent="onSubmit">
            <div class="form-group">
              <label for="email">邮箱</label>
              <input
                type="email"
                class="form-control"
                v-model="email"
                >
            </div>
            <div class="form-group">
              <label for="password">密码</label>
              <input
                type="password"
                class="form-control"
                v-model="password"
                >
            </div>
            <div class="form-group">
              <label for="confirm-password">确认密码</label>
              <input
                type="password"
                class="form-control"
                v-model="confirmPassword"
                >
            </div>
            <button type="submit" class="btn btn-block btn-success">注册</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
    export  default  {
       data() {
          return  {
            email:'',
            password:'',
            confirmPassword:''
          }
       },
       methods:{
          onSubmit() {
               if(this.password===this.confirmPassword) {
                 const  formData = {
                     email:this.email,
                     password:this.password,
                     confirmPassword:this.confirmPassword
                 };
                 axios.post('users.json',formData).then(res=>{
                     this.$router.push({name:'loginLink'})
                 })

               } else  {
                   alert('两次密码不一致')
               }
          }
       }
    }
</script>
<style media="screen">
    img {
       width: 100px;
       /* height:150px; */
    }
</style>
